<template>
  <div style="height:100%">
    <div>
      <a-card style="width:100%">
        <a-table
          :dataSource="dataSource"
          :columns="column"
          size="middle"
          rowKey="id"
          :pagination="false"
        >
        <span slot="action" slot-scope="text, record">
           <a @click="preview(record.fileUrl)">预览</a>
           <a-divider type="vertical"/>
           <a @click="handleDelete(record)">删除</a>
        </span>
        </a-table>

      </a-card>
      <div align="right" style="padding-top: 10px">
        <a-upload
          action="http://localhost:7000/myAdminTemplate/sys/file/upload"
          @change="handleChange"
          :data = "requestData"
          :showUploadList="false"
        >
          <a-button type="primary" size="large">
            <a-icon type="upload"></a-icon>
            上传文件
          </a-button>
        </a-upload>
      </div>
    </div>

  </div>
</template>


<script>
    import {Base64} from '../../../static/js/base64.min.js'
    import store from '../../store'
    import {getAction, postAction} from "../../api/manage";
    export default {
        name: "FilePreviewOnline",
        data(){
          return{
            filePreviewUrl:"",
            requestData:{
              uploadUserName:store.getters.username
            },
            column:[
              {
                title:"文件名称",
                align:"center",
                dataIndex:"fileName"
              },
              {
                title:"上传人",
                align:"center",
                dataIndex:"uploadUsername"
              },
              {
                title:"上传时间",
                align:"center",
                dataIndex:"uploadTime"
              },
              {
                title: '操作',
                dataIndex: 'action',
                align:"center",
                fixed:"right",
                scopedSlots: { customRender: 'action' }
              }
            ],
            dataSource:[],
            url:{
              list:"/sys/file/list",
              delete:"/sys/file/delete"
            }
          }
        },
        mounted() {
          this.getFileList();
        },
        methods:{
          preview(fileUrl){
            this.filePreviewUrl = 'http://xxxxx:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(fileUrl));
            window.open(this.filePreviewUrl);
          },
          handleChange(info){
            if(info.file.status === "done"){
              var fileUrl = info.file.response.message;
            }
            this.getFileList();
          },
          handleDelete(record){
            postAction(this.url.delete,record).then((res)=>{
              if(res.data.success) {
                this.getFileList();
                this.$message.success(res.data.message,5);
              }

            })

          },
          getFileList(){
            getAction(this.url.list,{}).then((res)=>{
              this.dataSource = res.data;
            })
          }
        }
    }
</script>

<style scoped>

</style>
